<template>
  <div class="main-container-app">
    <!--查询表单-->
    <el-row class="form-contain">
      <toll-road-form ref="form" @tollRoadList="handleTableData"
                      @tollRoadLoading="handleTableLoad"
                      :pageNum="pageNum"
                      :pageSize="pageSize"></toll-road-form>
    </el-row>
    <!--查询表格-->
    <div class="table-contain">
        <toll-road-table :tollRoadList="tollRoadData"
                         :tollRoadLoading="tollRoadLoading"
                         @editBoolean="editRoad"
                         @pageNum="setPageNum"
                         @pageSize="setPageSize"
                         @tollRoadAddVisible="openAddDialog"
                         @reSelectRoad="getReSelectRoad"
                         @editBaseRoad="editRoad"></toll-road-table>
    </div>
      <toll-road-add :addRoadVisible.sync="tollRoadAddVisible"
                     @reSelectRoad="getReSelectRoad"></toll-road-add>
      <toll-road-edit :editRoadVisible.sync="tollRoadEditVisible"
                      :editData="editData"
                      @reSelectRoad="getReSelectRoad"></toll-road-edit>
  </div>
</template>

<script>
  import TollRoadForm from './tollroadoperate/tollRoadForm'
  import TollRoadTable from './tollroadoperate/tollRoadTable'
  import TollRoadAdd from './tollroadoperate/tollRoadAdd'
  import TollRoadEdit from './tollroadoperate/tollRoadEdit'

  export default {
    components: {
      TollRoadEdit,
      TollRoadAdd,
      TollRoadTable,
      TollRoadForm
    },
    data() {
      return {
        tollRoadAddVisible: false,
        tollRoadEditVisible: false,
        tollRoadLoading: true,
        tollRoadData: [],
        editData: [],
        pageNum: 1,
        reSelect: 1,
        pageSize: 10
      }
    },
    methods: {
      editRoad(val) {
        this.tollRoadEditVisible = val[1]
        this.editData = val[0]
      },
      handleTableData(tollRoadList) {
        this.tollRoadData = tollRoadList
      },
      handleTableLoad(tollRoadLoading) {
        this.tollRoadLoading = tollRoadLoading
      },
      setPageNum(val) {
        this.pageNum = val
      },
      setPageSize(val) {
        this.pageSize = val
      },
      openAddDialog(val) {
        this.tollRoadAddVisible = val
      },
      getReSelectRoad() {
        this.$refs.form.handleSelectRoad()
      }
    }
  }
</script>

<style scoped>


</style>
